<style>
    .panel-body > div {
        float:left;
        padding:10px;
        width:100%;
        cursor:default;
        border-bottom:solid whitesmoke 1px;
        -webkit-transition-property: background-color;
        -webkit-transition-duration: .3s;
        -webkit-transition-timing-function: ease;
        -moz-transition-property: background-color;
        -moz-transition-duration: .3s;
        -moz-transition-timing-function: ease;
    }

    .panel-body > div.resultado:hover {
        background-color:#eff1ff;
    }

    .panel-body > div > div {
        float:left;
        width:150px;
        font-weight:bold
    }
    .grafica {
        float: none;
        height:20px !important;
        width:20px !important;
        position:absolute;
        right:10px;
        bottom:10px;
    }

    .panel-body {
        position:relative;
    }

    div.tipo {
       width:200px !important; 
    }
</style>

<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                <b>Usuarios Registrados</b>
            </a>
            <div style="float:right;margin-top:2px;">
                <span class="label label-info"><?php echo $usuarios['total']; ?></span>
            </div>
        </h4>
        <div style="clear:both"></div>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
        <div class="panel-body">
            <div style="border-bottom:solid silver 1px">
                <div class='tipo'>
                    Tipo
                </div>
                <div>
                    Total
                </div>
                <div>
                    Porcentaje
                </div>
            </div>
            <div class='resultado'>
                <?php 
                    $totalA = usuariosActivados(); 
                    $datos = colorPorcentaje($usuarios['total'],$totalA);
                ?>
                <div class='tipo'>
                    Usuarios Activados
                </div>
                <div style="font-weight:normal">
                    <?php echo "<b>".$totalA."</b> <font style='font-size:10px;color:gray'>/ ".$usuarios['total']."</font>";?>
                </div>
                <div style="font-weight:normal">
                    <?php echo "<font style='color:".$datos['color'].";'>".$datos['porcentaje']." %</font>";?>
                </div>
                 
            </div>
            <div class='resultado'>
                <?php 
                    $totalA = usuariosNoActivados(); 
                    $datos = colorPorcentaje($usuarios['total'],$totalA);
                ?>
                <div class='tipo'>
                    Usuarios no Activados
                </div>
                <div style="font-weight:normal">
                    <?php echo "<b>".$totalA."</b> <font style='font-size:10px;color:gray'>/ ".$usuarios['total']."</font>";?>
                </div>
                <div style="font-weight:normal">
                    <?php echo "<font style='color:".$datos['color'].";'>".$datos['porcentaje']." %</font>";?>
                </div>
                 
            </div>
            <div class='resultado'>
                <?php 
                    $totalB = totalUsuariosBaja(); 
                    $datos = colorPorcentaje($usuarios['total'],$totalB);
                ?>
                <div class='tipo'>
                    Usuarios Bajas
                </div>
                <div style="font-weight:normal">
                    <?php echo  "<b>".$totalB."</b> <font style='font-size:10px;color:gray'>/ ".$usuarios['total']."</font>"; ?>
                </div>
                <div style="font-weight:normal">
                    <?php echo "<font style='color:".$datos['color'].";'>".$datos['porcentaje']." %</font>";?>
                </div>
            </div>
            <div class='resultado'>
                <?php 
                    $totalBl = totalUsuariosBloqueados(); 
                    $datos = colorPorcentaje($usuarios['total'],$totalBl);
                ?>
                <div class='tipo'>
                    Usuarios Bloqueados
                </div>
                <div style="font-weight:normal">
                    <?php echo  "<b>".$totalBl."</b> <font style='font-size:10px;color:gray'>/ ".$usuarios['total']."</font>"; ?>
                </div>
                <div style="font-weight:normal">
                    <?php echo "<font style='color:".$datos['color'].";'>".$datos['porcentaje']." %</font>";?>
                </div>
            </div>
            <div class='resultado'>
                <?php 
                    $totalH = totalHombres(); 
                    $datos = colorPorcentaje($usuarios['total'],$totalH);
                ?>
                <div class='tipo'>
                    Hombres
                </div>
                <div style="font-weight:normal">
                    <?php echo  "<b>".$totalH."</b> <font style='font-size:10px;color:gray'>/ ".$usuarios['total']."</font>"; ?>
                </div>
                <div style="font-weight:normal">
                    <?php echo "<font style='color:".$datos['color'].";'>".$datos['porcentaje']." %</font>";?>
                </div>
            </div>
            <div class='resultado'>
                <?php 
                    $totalM = totalMujeres();
                    $datos = colorPorcentaje($usuarios['total'],$totalM); 
                ?>
                
                <div class='tipo'>
                    Mujeres
                </div>
                <div style="font-weight:normal">
                    <?php echo  "<b>".$totalM."</b> <font style='font-size:10px;color:gray'>/ ".$usuarios['total']."</font>"; ?>
                </div>
                <div style="font-weight:normal">
                    <?php echo "<font style='color:".$datos['color'].";'>".$datos['porcentaje']." %</font>";?>
                </div>
            </div>
            
            <div style="clear:both;border-bottom-width: 0px !important;"></div>
            <div class="grafica">
                <a class="statics" href="#" data-target="#verGraficaUsuario" data-toggle="modal"><i class="icon icon-signal"></i></a>
            </div>
        </div>
    </div>
</div>
